<template>
  <div id="edge">
    <el-slider :min="min==undefined?0:min" :max="max" style="width:100%;width: 220px" v-model="number"></el-slider>
    <el-input size="small" style="width: 120px;margin-left:20px" v-model="number">
      <template slot="append">{{unit}}</template>
    </el-input>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "edge",
  data() {
    return {
      number: this.init,
    };
  },
  created(){
    this.$emit("input", this.number);
  },
  watch: {
    currentId(){
      this.number = this.init
    },
    number(){
      this.$emit("input", this.number);
    }
  },
  props: ["unit", "max", "init","min"],
  computed:{
    ...mapState(['currentTime','currentId'])
  }
  
};
</script>

<style lang="less" scoped>
@import url("../../assets/css/base.less");
/deep/.el-input-group__append,
.el-input-group__prepend {
  padding: 0 10px;
}
#edge {
  display: flex;
}
</style>
